<template>
  <view class="car-maintenance">
    <view class="header">
      <view class="my-car-wrapper">
        <view class="my-car" v-if="myLoveCar" @click="onChangeCar">
          <u-image :src="`https://files.yzsheng.com/goodimg/brandimg/${myLoveCar.brand_Id}.png`" width="90" height="90" mode="aspectFit"></u-image>
          <view class="info">
            <text class="title">{{myLoveCar.brand_Name}}-{{myLoveCar.car_Type_Name}}</text>
            <text class="model">{{myLoveCar.car_Name}}</text>
          </view>
          <u-icon name="arrow-right" color="#999" size="30"></u-icon>
        </view>
        
        <view v-else class="top flex flex-jc-c flex-dir-c default" style="height: 160rpx;position: relative;">
        	<image src="https://files.yzsheng.com/client/index/carMaintenance/tianjiaqiche.png" style="width: 199rpx;height: 91rpx;position: absolute;bottom: 33rpx;right: 40rpx;"></image>
        	<view style="color: #666666;">添加爱车，提供精准适配服务</view>
        	<view class="add" @click="onClickAddCar">添加爱车<u-icon name="arrow-right"></u-icon></view>
        </view>
        
      </view>
      <view class="store-num"><text>{{city}}有<text class="red">{{num}}家</text>7迈车养车门店已开业</text></view>
    </view>
    <view class="list-wrapper">
      <view class="tab"></view>
      <view class="tab-empty" v-show="tabFixed&&screeningCriteria.length > 0" style="height:184rpx"></view>
      <view class="tab-empty" v-show="tabFixed&&screeningCriteria.length == 0" style="height:90rpx"></view>
     
      
      <view :class="{'fixed': tabFixed}" :style="{'top': navbarHeight + 'px'}">
        <!-- <view class="tab-wrapper" v-if="showTab">
          <view class="tab-list" :class="{'ml': current >= 2}">
            <u-tabs
            name="cate_name" 
            :list="list" 
            :is-scroll="true" 
            :current="current" 
            @change="changeTab" 
            active-color="#333"
            inactive-color="#666"
            font-size="28"
            height="80rpx"
            :active-item-style="tabActiveStyle"
            :bar-style="barActiveStyle"
            ></u-tabs>
          </view> -->
          <!-- <view class="btn-more">
            <u-icon name="grid-fill" color="#333" size="32" @click="showClassify = !showClassify"></u-icon>
            <view class="tab-mask" v-if="showClassify" @touchmove.stop.prevent>
              <view class="mask"></view>
              <view class="content">
                <view class="title"><text>全部门店服务</text></view>
                <view class="list">
                  <view class="item" v-for="(item, index) in 10" :key="index">
                    <image  class="icon" src="http://img1.sycdn.imooc.com/szimg/5fc065fe094b85c705400304.png"></u-image>
                    <text class="text">洗车</text>
                  </view>
                </view>
              </view>
            </view>
          </view> -->
        <!-- </view> -->
        
        <view class="dropdown-wrapper" :class="downStatus ? 'down-open':'down-close'">
          <u-dropdown @open="downStatus = true" @close="onCloseDropdown" active-color="#FBD321" ref="uDropdown">
            <u-dropdown-item title="区域">
              <picker-area @change="onChangePicker" />
            </u-dropdown-item>
            <u-dropdown-item v-model="value2" title="筛选" :options="options2" @change="storeTypeChange"></u-dropdown-item>
          </u-dropdown>
        </view>
        
        
        <!-- 筛选条件 -->
        <view class="condition" v-if="screeningCriteria.length > 0">
          <view class="condition-list">
            <scroll-view class="scroll-view" scroll-x>
              <view class="condition-item" v-for="(item, index) in screeningCriteria" :key="index">
                <text>{{item.name}}</text>
                <text class="iconfont iconguanbi" @click="onClickDelScreeningCriteria(item, index)"></text>
              </view>
            </scroll-view>
          </view>
          <view class="btn-reset" @click="onClickReset">
            <text class="iconfont iconzhongzhi"></text>
            <text class="text">重置</text>
          </view>
        </view>
      </view>
      
    </view>
    
    <view class="store-list">
      <view class="flex flex-jc-c u-m-20" v-if="loading && query.pageIndex === 1"><u-loading mode="circle"></u-loading></view>
      <block v-for="(item, index) in result" :key="index">
        <car-maintenance-item :item="item" />
      </block>
      
      <view style="height: 30vh;" v-if="result.length <= 0 && isEnd">
        <u-empty mode="list"></u-empty>
      </view>
      
      <view class="flex flex-jc-c u-m-20" v-if="query.pageIndex !== 1">
        <u-loadmore :status="status" />
      </view>
    </view>
    
  </view>
</template>

<script>
import carMaintenanceItem from './carMaintenanceItem.vue'
import pickerArea from './pickerArea.vue'
export default {
  components: {
    carMaintenanceItem,
    pickerArea
  },
  props: {
    tabIndex: {
      type:[Number, String],
      default: 0
    }
  },
  watch: {
    tabIndex(newVal, oldVal) {
      if(newVal === 0 && !this.showTab){
        this.showTab = true
      }
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 10,
        complete: () => {
          if(newVal === 0) {
            this.tabFixed = false
          }
        }
      })
    },
    lat(newVal, oldVal) {
      if(newVal !== oldVal) {
        this.city = this.$store.state.city || '成都市'
        this.$commen.getLocation(data => {
          this.query.dlon = data.lon
          this.query.dlat = data.lat
          this.loading = false
          this.getList(true)
        })
      }
    }
  },
  computed:{
    lat() {
      return this.$store.state.lat
    }
  },
  data() {
    return {
      tabActiveStyle: {
        'font-weight': 'bold',
        'font-size': '38rpx'
      },
      barActiveStyle: {
        'background': 'linear-gradient(0deg, #FBB000, #FFE23E)'
      },
      list: [{
        cate_name: '全部'
      }, {
        cate_name: '洗美门店'
      }, {
        cate_name: '保养门店'
      }, {
        cate_name: '轮胎门店'
      }, {
        cate_name: '喷漆门店'
      }, {
        cate_name: '改装门店'
      }, {
        cate_name: '钣金门店'
      }, {
        cate_name: '安装门店'
      }],
      current: 0,
      value1: 1,
      value2: -1,
      options1: [],
      options2: [{
        label: '7迈车旗舰店',
        value: 1,
      },
      {
        label: '7迈车体验店',
        value: 2,
      },
      {
        label: '中心店',
        value: 3,
      },
      {
        label: '4S入驻',
        value: 4,
      }],
      downStatus: false,
      showTab: false,
      tabFixed: false,
      navbarHeight: uni.getSystemInfoSync().statusBarHeight + 44,
      showClassify: false,
      city: this.$store.state.city || '成都市', // 城市
      num: 0, // 店铺数量
      query: {
        districtid: this.$store.state.postalCode || 0,
        StoreType: '',
        dlon: 0,
        dlat: 0,
        pageIndex: 1,
        pageSize: 20
      },
      loading: false,
      isEnd: false,
      status: 'loading',
      result: [],
      screeningCriteria: [],
      myLoveCar: null, // 我的爱车
      specifAll: {
        brandlist: null, //品牌
        Serieslist: null, //系列
        Displacement: null, //排量
        Modelyear: null, //年款
        Configulists: null, //车子
      }
    }
  },
  created() {
    uni.$on('storePageScroll', data => {
      this.judgeFixed()
    })
    this.getMyLoveCar()
    
    
    this.loading = true
    this.$commen.getLocation(data => {
      this.query.dlon = data.lon
      this.query.dlat = data.lat
      this.loading = false
      this.getList()
    })
    
    uni.$on('storeLoadMore', data => {
      if(data === 1) {
        this.getList()
      }
    })
    
    // 选择品牌，系列，排量，年款，车子
    uni.$on('carMaintenance', data => {
      Object.assign(this.specifAll, data)
      if (data.licenseplate && data.pageFrom === 'carMaintenance') {
        this.addCar(this.specifAll)
      }
    })
    
    uni.$on('changeMyLoveCar', data => {
      this.myLoveCar = data
    })
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 判断是否到吸顶
    judgeFixed() {
      uni.createSelectorQuery().in(this).select('.tab').boundingClientRect((data)=> {
        this.tabFixed = data.top <= this.navbarHeight ? true : false
      }).exec()
    },
    changeTab(index) {
      this.current = index
    },
    onChangePicker(data) {
      this.$refs.uDropdown.close()
      this.downStatus = false
      if(data) {
        this.query.districtid = data.item.id
        
        let sc = this.screeningCriteria;
        for(let i = 0; i < sc.length; i++){
          if(sc[i].type === 2) {
            sc.splice(i, 1);
            break;
          }
        }
        sc.push({
          name: data.name,
          type: 2
        });
        this.city = data.name
        
        this.query.pageIndex = 1
        this.isEnd = false
        this.status = 'loading'
        this.loading = false
        uni.pageScrollTo({ 
          scrollTop: 0,
          duration: 100
        });
        this.getList()
      }
    },
    onCloseDropdown(data) {
      this.downStatus = false
      // if(data === 0) {
      //   this.query.pageIndex = 1
      //   this.isEnd = false
      //   this.status = 'loading'
      //   this.loading = false
      //   uni.pageScrollTo({ 
      //     scrollTop: 0,
      //     duration: 100
      //   });
      //   this.getList()
      // }
    },
    /*
      获取门店列表
      @param {Boolean} isInit 是否初始化query数据
      params: 
    */
    async getList(isInit) {
      if(isInit) {
        let query = {
          districtid: this.$store.state.postalCode || 0,
          StoreType: '',
          pageIndex: 1,
          pageSize: 20
        }
        let oldQuery = this.query
        this.query = {
          ...oldQuery,
          ...query
        }
        this.isEnd = false
        this.loading = false
      }
      if (this.loading || this.isEnd) return false
      this.loading = true
      let res = await this.$api.store.GetMaintainStoreList(this.query)
      if(res.code === 200) {
        this.num = res.data.total
        let resultList = isInit || this.query.pageIndex === 1 ? [] : this.result
        let list = res.data.list
        if (list.length > 0) {
          this.result = resultList.concat(list)
          this.query.pageIndex = this.query.pageIndex + 1
          if(list.length < 20) {
            this.isEnd = true
            this.status = 'nomore'
          }
        } else {
          this.result = resultList.concat(list)
          this.isEnd = true
          this.status = 'nomore'
        }
      }
      this.loading = false
    },
    // 店铺类型筛选
    storeTypeChange(data) {
      for(let i in this.options2) {
        if(this.options2[i].value === data) {
          let sc = this.screeningCriteria;
          for(let i = 0; i < sc.length; i++){
            if(sc[i].type === 1) {
              sc.splice(i, 1);
              break;
            }
          }
          sc.push({
            name: this.options2[i].label,
            type: 1
          });
        }
      }
      
      this.query.pageIndex = 1
      this.isEnd = false
      this.status = 'loading'
      this.loading = false
      uni.pageScrollTo({ 
        scrollTop: 0,
        duration: 100
      });
      this.getList()
    },
    // 点击重置
    onClickReset() {
      this.screeningCriteria = []
      this.value2=-1
      this.city = this.$store.state.city || '成都市'
      this.query.districtid = this.$store.state.postalCode || 0
      this.getList(true)
    },
    // 删除筛选条件
    onClickDelScreeningCriteria(data, index) {
      let sc = this.screeningCriteria;
      sc.splice(index, 1);
      this.screeningCriteria = sc;
      
      if(data.type === 2) {
        this.city = this.$store.state.city || '成都市'
        this.query.districtid = this.$store.state.postalCode || 0
      }
      
      this.query.pageIndex = 1
      this.isEnd = false
      this.status = 'loading'
      this.loading = false
      uni.pageScrollTo({ 
        scrollTop: 0,
        duration: 100
      });
      this.getList()
    },
    // 获取我的爱车
    async getMyLoveCar() {
      let userinfo = uni.getStorageSync('Ztc_C_USER_INFO') || null
      if(userinfo) {
        try{
          let res = await this.$api.commodity.GetCarList({
            uid: userinfo.id
          })
          if(res.code === 200) {
            this.myLoveCar = res.data.list[0] || null
          }
        }catch(e){
        }
      }
    },
    // 点击添加爱车
    onClickAddCar() {
      if(uni.getStorageSync('token') && uni.getStorageSync('token') !== '') {
        uni.navigateTo({
          url: '/pages_common/addYourCar/addYourCar?type=120&pageFrom=carMaintenance'
        })
      } else {
        uni.setStorageSync('launchFlag', false)
        uni.navigateTo({
          url: '/pages_logins/login/login'
        })
      }
    },
    // 点击选择爱车
    onChangeCar() {
      uni.navigateTo({
        url: '/pages_common/myLoveCarList/myLoveCarList'
      })
    },
    // 添加爱车
    async addCar(data) {
      try{
        uni.showLoading({
          title: '加载中'
        })
        let userinfo = uni.getStorageSync('Ztc_C_USER_INFO') || null
        let res = await this.$api.common.AddCar({
          uid: userinfo.id,
          brand_Id: data.brandlist.bid,
          brand_Name: data.brandlist.brand,
          car_Type_Id: data.Serieslist.carTypeId,
          car_Type_Name: data.Serieslist.carTypeName,
          car_Id: data.Configulist.id,
          car_Name: data.Configulist.name,
          displacement: data.Displacement.pName,
          yeartype: data.Configulist.date,
          car_Num: data.licenseplate, //车牌号
        })
        uni.hideLoading()
        this.getMyLoveCar()
      }catch(e){
        uni.hideLoading()
      }
    }
  },
  destroyed() {
    uni.$off('changeMyLoveCar')
    uni.$off('carMaintenance')
  }
}
</script>

<style lang="scss" scoped>
.header{
  background-color: #fff;
}
.my-car-wrapper{
  padding: 20rpx 24rpx;
  .my-car{
    background-color: #F5F5F5;
    border-radius: 10px;
    height: 160rpx;
    display: flex;
    align-items: center;
    padding: 0 25rpx;
    .info{
      flex: 1;
      height: 90rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 35rpx;
      .title{
        font-size: 34rpx;
        color: #333;
        font-weight: bold;
      }
      .model{
        font-size: 28rpx;
        color: #666;
      }
    }
  }
  
  .top{
    padding: 35rpx 25rpx;
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.12);
    border-radius: 10rpx;
    .top-main{
    	flex: 1;
    }
    
    .top-title{
    	width: 400rpx;
    	margin-left: 35rpx;
    	font-size: 28rpx;
    	font-weight: 500;
    	color: #666666;
    	
    	.pz{
    		display: -webkit-box;
    		overflow: hidden;
    		white-space: normal !important;
    		text-overflow: ellipsis;
    		word-wrap: break-word;
    		-webkit-line-clamp: 1;
    		-webkit-box-orient: vertical;
    	}
    	view:first-child{
    		font-size: 34rpx;
    		display: -webkit-box;
    		overflow: hidden;
    		white-space: normal !important;
    		text-overflow: ellipsis;
    		word-wrap: break-word;
    		-webkit-line-clamp: 2;
    		-webkit-box-orient: vertical;
    		font-weight: bold;
    		color: #333333;
    	}
    }
    
    
    .maintain{
    	color: #3D3D3D;
    	font-weight: 500;
    	width: 163rpx;
    	height: 54rpx;
    	background: linear-gradient(0deg, #FBD220, #FFE23E);
    	border-radius: 27rpx;
    	text-align: center;
    	line-height: 54rpx;
    }
    .top-logo{
    	margin-left: 25rpx;
    	width: 90rpx;
    	height: 90rpx;
    }
    .default{
    	padding: 0 42rpx;
      margin: 24rpx;
      background-color: #fff;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.12);
      border-radius: 10rpx;
    }
    .add{
    	width: 200rpx;
    	height: 60rpx;
    	background: linear-gradient(0deg, #FBD220, #FFE23E);
    	border-radius: 30px;
    	font-size: 28rpx;
    	font-weight: bold;
    	color: #3D3D3D;
    	text-align: center;
    	line-height: 60rpx;
    	margin-top: 20rpx;
    }
  }
}
.store-num{
  font-size: 28rpx;
  color: #999;
  padding: 0 24rpx 16rpx;
  .red{
    color: #FF4B44;
  }
}

.fixed{
  position: fixed;
  left: 0;
  right: 0;
  background-color: #f6f6f6;
  z-index: 99;
}
.tab-wrapper{
  width: 750rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;
  .tab-list{
    flex: 1;
    overflow: hidden;
  }
  .ml{
    margin-left: 24rpx;
  }
  .btn-more{
    height: 50rpx;
    display: flex;
    align-items: center;
    border-left: 2rpx solid #DBDBDB;
    padding: 0 24rpx;
  }
}
.dropdown-wrapper{
  background-color: #fff;
  border-top: 10rpx solid #f6f6f6;
  position: relative;
  
  // 下拉菜单打开时，给下拉菜单设置高度
  &.down-open {
    & /deep/ .u-dropdown__content {
      height: 100vh !important;
    }
  }
  &.down-close {
    & /deep/ .u-dropdown__content {
      height: 0 !important;
    }
  }
  /deep/ .u-dropdown__content__popup .uni-scroll-view{
    border-radius: 0 0 20rpx 20rpx;
  }
  /deep/ .uicon-arrow-down-fill{
    font-size: 14rpx !important;
  }
  /deep/ .u-border-bottom{
    text-align: center;
    &::after{
      border-bottom: none;
    }
  }
  
  /deep/ .u-cell_title{
    width: 100% !important;
  }
}
.condition{
  display: flex;
  flex-direction: row;
  padding: 24rpx;
  align-items: center;
  .btn-reset{
    color: #999;
    height: 50rpx;
    margin-left: 24rpx;
    display: flex;
    align-items: center;
    .iconfont{
      font-size: 28rpx;
    }
    .text{
      font-size: 26rpx;
      margin-left: 10rpx;
    }
  }
  .condition-list{
    flex: 1;
    overflow: hidden;
    height: 50rpx;
    border-right: 2rpx solid #DBDBDB;
    .scroll-view{
      white-space: nowrap;
      ::-webkit-scrollbar {
      	display: none;  
      	width: 0 !important;  
      	height: 0 !important;
      	-webkit-appearance: none;
      	background: transparent;  
      }
    }
    .condition-item{
      display: inline-block;
      background-color: #ddd;
      border-radius: 10rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      height: 50rpx;
      line-height: 50rpx;
      color: #333;
      margin-right: 20rpx;
      .iconfont{
        font-size: 26rpx;
        margin-left: 14rpx;
      }
    }
  }
}
.tab-empty{
  height: 268rpx;
}
.tab-mask{
  position: absolute;
  top: 80rpx;
  left: 0;
  height: 100vh;
  width: 750rpx;
  z-index: 99;
  .mask{
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
  }
  .content{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    background-color: #fff;
    .title{
      height: 86rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      border-bottom: 2rpx solid #eee;
    }
    .list{
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx 20rpx 40rpx;
      .item{
        width: 130rpx;
        height: 130rpx;
        background-color: #fff;
        box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.14);
        border-radius: 10rpx;
        margin: 25rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .icon{
          width: 54rpx;
          height: 54rpx;
        }
        .text{
          font-size: 28rpx;
          color: #333;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
